<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改小区操作')"/>
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>

</head>
<body>
<div class="main-content">
    <form class="form-horizontal" id="form-residential-edit" th:object="${residential}" AUTOCOMPLETE="OFF">
        <input name="housingId" type="hidden" th:field="*{residentialId}"/>
        <h4 class="form-header h4">小区基本信息</h4>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">小区名称：</label>
                    <div class="col-sm-8">
                        <input name="sellResidentialName" id="sellResidentialName" class="form-control" type="text"
                               th:field="*{residentialName}"/>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">年代：</label>
                    <div class="col-sm-8">
                        <input name="measure" class="form-control" type="text" th:field="*{years}"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">小区占地面积：</label>
                    <div class="col-sm-8">
                        <input name="floor" class="form-control" type="text" th:field="*{residentialMeasure}"/>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">建筑类型：</label>
                    <div class="col-sm-8">
                        <input name="renovation" class="form-control" type="text" th:field="*{architectureType}"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">物业名称：</label>
                    <div class="col-sm-8">
                        <input name="louhu" class="form-control" type="text" th:field="*{propertyName}"/>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">绿化率：</label>
                    <div class="col-sm-8">
                        <input name="orientation" class="form-control" type="text" th:field="*{greeningRate}"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">容积率：</label>
                    <div class="col-sm-8">
                        <input name="phone" class="form-control" type="text" th:field="*{plotRatio}"/>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">详细地址：</label>
                    <div class="col-sm-8">
                        <input name="price" class="form-control" type="text" th:field="*{address}"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">区域：</label>
                    <div class="col-sm-8">
                        <input name="unitPrice" class="form-control" type="text" th:field="*{region}"/>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">参考均价：</label>
                    <div class="col-sm-8">
                        <input name="roomNum" class="form-control" type="text" th:field="*{priceAvg}"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">城市：</label>
                    <div class="col-sm-8">
                        <input name="officeNum" class="form-control" type="text" th:field="*{city}"/>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">经度：</label>
                    <div class="col-sm-8">
                        <input name="officeNum" class="form-control" type="text" th:field="*{longitude}"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">纬度：</label>
                    <div class="col-sm-8">
                        <input name="officeNum" class="form-control" type="text" th:field="*{latitude}"/>
                    </div>
                </div>
            </div>
        </div>
        <h4 class="form-header h4">图片</h4>

        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <div class="file-loading">
                        <input id="residentialFile" type="file" name="residentialFile"
                               multiple="multiple">
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="row">
    <div class="col-sm-offset-5 col-sm-10">
        <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存
        </button>&nbsp;
        <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭
        </button>
    </div>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>

<script th:inline="javascript">

    //小区图片数组
    var ResidentialImageArray = new Array();

    var prefix = ctx + 'residential';

    $(function () {
        $('#sellResidentialName').attr("disabled", true);

        var residential = [[${residential}]];
        for (var i = 0; i < residential.imageInfoList.length; i++) {
            ResidentialImageArray.push(residential.imageInfoList[i].imagePath)
        }

        $("#residentialFile").fileinput({
            'theme': 'explorer-fas',
            'uploadUrl': '#',
            overwriteInitial: false,
            initialPreviewAsData: true,
            initialPreview: ResidentialImageArray,
            deleteUrl: prefix + "/deleteImage",
        });

        //files为fileinput控件ID，
        $('#residentialFile').on('fileuploaded', function (e, data, previewId, index) {
            //在上传成功事件中将服务器返回的所需数据，添加到该文件对应的div中
            $('#' + previewId).attr('fileid', data.response.fileid);
        }).on('filesuccessremove', function (event, previewId, extra) {
            console.log(previewId);
            console.log(event);


        });

    });




    function submitHandler() {
        if ($.validate.form()) {
            var data = $("#form-residential-edit").serializeArray();
            $.operate.saveTab(prefix + "/rentResidentialEdit", data);
        }
    }


</script>
</body>
</html>